<template>
  <div class="baseOverFlowContent" :title="isAnimate?text:''">
    <div
      :class="isAnimate?'horizontalScrollAnimation baseOverFlow':'baseOverFlow'"
      ref="baseFlowRefer"
    >
      {{text}}
      <slot></slot>
    </div>
  </div>
</template>
<script>
// 判断元素有没有超过父元素
const overTarget = function (ele) {
  const cellChild = ele
  const range = document.createRange()
  range.setStart(cellChild, 0)
  range.setEnd(cellChild, cellChild.childNodes.length)
  const rangeWidth = range.getBoundingClientRect().width
  const padding =
    (parseInt(cellChild.style.paddingLeft, 10) || 0) +
    (parseInt(cellChild.style.paddingRight, 10) || 0)
  if (rangeWidth + padding > cellChild.offsetWidth) {
    return true
  } else {
    return false
  }
}
export default {
  data () {
    return {
      isAnimate: false
    }
  },
  props: ['text'],
  watch: {
    text: {
      handler: function () {
        this.$nextTick(() => {
          this.resizeAnimate()
        })
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    window.addEventListener('resize', this.resizeAnimate)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resizeAnimate)
  },
  methods: {
    /**
     * @Descripttion: 重新定义动画事件
     * @param
     * @return:
     * @author: qs
     */
    resizeAnimate () {
      const overType = overTarget(this.$refs.baseFlowRefer)
      this.isAnimate = overType
    }
  }
}
</script>
<style lang="scss" scoped>
.baseOverFlowContent {
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .baseOverFlow {
    text-align: center;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
// 横向滚动的动画 用于头部使用的
.horizontalScrollAnimation {
  display: inline-block;
  white-space: nowrap;
  animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
  0% {
    transform: translateX(10%);
  }
  50% {
    transform: translateX(-40%);
  }
  70% {
    transform: translateX(-70%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
